<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面</title>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <!-- <link rel="stylesheet" href="./3.21/3.21考试.css"> -->
    <style>
        img {
            height: 200px;
            width: 200px;
        }
    </style>
</head>

<body>

    <div>
        <div class="lan_">空调</div>
        <div class="lan_">平板电视</div>
        <div class="lan_">生活电器</div>
        <div class="lan_">洗衣机</div>
        <div class="lan_">冰箱</div>
        <div class="lan_">厨房大电</div>
    </div>
    <div class="ttt">
    </div>
    <h1>购物车</h1>
    <h3>总价: <span class="money">0</span></h3>
    <ul></ul>

    <script>
        // var shuju = [
        kt = [{
            pid: 0,
            id: 1,
            img: 'https://img13.360buyimg.com/n1/jfs/t1/281844/17/8392/95045/67e0d268Fa01b1e1e/761a9c23ac5c6e8a.jpg.avif',
            introduce: 'CL京东联名 1.5匹新一级能效 真省电SE挂机',
            price: 1649
        },
        {
            pid: 0,
            id: 2,
            img: 'https://img13.360buyimg.com/n1/jfs/t1/284829/11/2807/147016/67d52c5dFa47d841c/9b922bb3beca80c9.jpg.avif',
            introduce: '空调大1.5匹冷暖节能变频大风量卧室单冷壁挂式大一匹冷暖',
            price: 899
        },
        {
            pid: 1,
            id: 3,
            img: 'https://img13.360buyimg.com/n1/jfs/t1/284446/24/5748/176449/67dbcc59Fa34d42f4/dda2c2b81f5aa2bb.jpg.avif',
            introduce: '奥克斯（AUX）空调挂机1匹/1.5匹新一级/三级能效',
            price: 1699
        },
        {

            pid: 1,
            id: 4,
            img: 'https://img10.360buyimg.com/n1/jfs/t1/260593/21/28421/135184/67c87bafF46dcb2ff/f36e6f7dc95422ba.png.avif',
            introduce: '大1.5匹冷暖变频家用空调挂机1匹单冷出租房卧式壁挂式一级能效',
            price: 899
        },
        {
            pid: 2,
            id: 5,
            img: 'https://img10.360buyimg.com/n1/jfs/t1/274172/29/2041/129742/67d1b9c6F9bfd5808/06490fbe8343f694.png.avif',
            introduce: '新一级能效空调大1.5匹挂机家用出租屋空调卧室冷暖挂机节能省电壁挂式',
            price: 1649
        },
        {
            pid: 2,
            id: 6,
            img: 'https://img14.360buyimg.com/n1/jfs/t1/277004/11/7035/99571/67dccc51F8d6dc560/ccb0bbcc9b97d724.jpg.avif',
            introduce: '海信（Hisense）空调 大1匹/1.5匹 易省电 空调挂机 AI省电 速冷热 咨询享补贴',
            price: 1799
        },
        {
            pid: 3,
            id: 7,
            img: 'https://img11.360buyimg.com/n1/jfs/t1/277887/15/7187/173611/67dd2609Fbd2f5cae/6695be1e4606f791.jpg.avif',
            introduce: ' 美的（Midea）空调挂机大一匹酷省电 一级能效全直流变频冷暖空调 双节能低噪 智能除菌大风量 ',
            price: 1649
        },
        {
            pid: 3,
            id: 8,
            img: 'https://img10.360buyimg.com/n1/jfs/t1/274203/35/7155/170198/67dd1df4F1f960fe6/00dc833dd91564f5.jpg.avif',
            introduce: '海尔空调净省电Plus1.5匹强劲冷暖新一级能效节能变频家用挂机壁挂式一键AI省电除菌 全屋智联独立除湿',
            price: 1649
        },
        ]
        //     pb = [{
        //         img: 'https://img11.360buyimg.com/n1/jfs/t1/272193/4/2549/102860/67d2bd0dF7cd8b8ca/3a33311af9e05195.jpg.avif',
        //         introduce: 'Vidda R32 二级能效版 海信电视 32英寸 金属全面屏',
        //         price: 499,
        //     },
        //     {
        //         img: 'https://img13.360buyimg.com/n1/jfs/t1/277746/32/6956/135653/67dc38deFaf5310fa/2cc04440b49da1c4.jpg.avif',
        //         introduce: 'JAV27英寸闺蜜机随心屏 国家补贴20%',
        //         price: 2999,
        //     },
        //     {
        //         img: 'https://img13.360buyimg.com/n1/jfs/t1/278513/16/3176/117572/67d4112cF7a1f8f22/d753e19f1b7c7188.jpg.avif',
        //         introduce: '小米（MI）电视 75英寸一级能效 144Hz高刷 2GB+32GB REDMI 智能电视 ',
        //         price: 2999,
        //     },
        //     {
        //         img: 'https://img11.360buyimg.com/n7/jfs/t1/274144/8/3159/91489/67d409b3F5b5bb7e4/34cd006dd2506ef1.jpg',
        //         introduce: '小米（MI）电视 55英寸2025款 二级能效 144Hz高刷 2GB+32GB平板电视Redmi ',
        //         price: 1599,
        //     },
        //     {
        //         img: 'https://img10.360buyimg.com/n1/jfs/t1/275409/6/7334/160720/67dd2f89F7fa883a4/075851e3354a621c.png.avif',
        //         introduce: 'TCL电视 65T5L 65英寸 288Hz高刷 QLED量子点 DeepSeek AI电视',
        //         price: 2659,
        //     },
        //     {
        //         img: 'https://img12.360buyimg.com/n1/jfs/t1/283996/12/5762/209176/67dbf24cF00be3c84/4d6032171f914d1e.jpg.avif',
        //         introduce: 'TCL雷鸟 雀4 家电国家补贴 55英寸 以旧换新 4K超高清',
        //         price: 1299,
        //     },
        //     {
        //         img: 'https://img11.360buyimg.com/n1/jfs/t1/216596/39/45229/134600/6710ff2fF7a03f3ce/c1306b2bbdbf1fc4.png.avif',
        //         introduce: '4K 王牌 全新超高清液晶电视机 智能语音网络平板家用WiFi语音投屏彩电',
        //         price: 378,
        //     },
        //     {
        //         img: 'https://img14.360buyimg.com/n1/jfs/t1/261186/21/22049/42517/67b6f9fbFac13a014/f3b5cb6fec1f18b8.jpg.avif',
        //         introduce: '海信电视75E3Q 75英寸 Mini LED级控光 DeepSeek AI智能高刷 ',
        //         price: 3449,
        //     },],
        //     sh = [{
        //         img: 'https://img13.360buyimg.com/n1/jfs/t1/267009/4/23032/317008/67b92838F647c3fab/3b424c168c4f4761.jpg.avif',
        //         introduce: '康佳（KONKA）取暖器家用小太阳电暖器轻音电暖气取暖烤火炉台式电热两档调节速热倾倒断电 KH-TY15',
        //         price: 44,
        //     },
        //     {
        //         img: 'https://img10.360buyimg.com/n1/jfs/t1/197774/27/50447/130691/674e6d00Ff2cc84a7/84aa9d59bf3f9ff7.jpg.avif',
        //         introduce: 'NOCCLILI取暖器浴室暖风机家用节能省电电暖气壁挂式卫生间洗澡专用   ',
        //         price: 118,
        //     },
        //     {
        //         img: 'https://img10.360buyimg.com/n1/jfs/t1/109176/29/55085/75830/670dffceF128ba4d2/b258699498ab125d.jpg.avif',
        //         introduce: '万利达电热水壶家用烧水壶保温一体自动断电防烫泡茶专用开水壶',
        //         price: 33,
        //     },
        //     {
        //         img: 'https://img13.360buyimg.com/n1/jfs/t1/276152/3/290/77187/67ce5d6cF407fdf17/6604eb54725b53eb.jpg.avif',
        //         introduce: '超人电吹风机家用RD1650大功率大风量宿舍用学生吹风筒',
        //         price: 30,
        //     },
        //     {
        //         img: 'https://img14.360buyimg.com/n1/jfs/t1/261095/3/28998/148063/67c94b20F808c64e5/5cdf9b01736efedb.jpg.avif',
        //         introduce: '瑞小泉明渠式紫外线消毒器市政生活电器工业工厂养殖水产生活污水处理沟渠框架',
        //         price: 100,
        //     },
        //     {
        //         img: 'https://img12.360buyimg.com/n1/jfs/t1/237806/21/38121/164788/67d40217Fc52988ca/ccfd50a8e6696109.jpg.avif',
        //         introduce: '美的（Midea）养生壶 1.5L全自动煮茶壶 24h预约烧水壶',
        //         price: 58,
        //     },
        //     {
        //         img: 'https://img11.360buyimg.com/n1/jfs/t1/252863/36/8989/90910/677a1f6bF61507d3d/ba2945ac567e322f.jpg.avif ',
        //         introduce: '海尔（Haier） 除螨仪家用床上紫外线杀菌除螨吸尘有线手持式床铺沙发去螨虫小型机器',
        //         price: 149,
        //     },
        //     {
        //         img: 'https://img11.360buyimg.com/n1/jfs/t1/272705/1/7106/195136/67dcc131F4de6d83a/7aea8965d29b68b8.jpg.avif',
        //         introduce: '美的（Midea）破壁机国家补贴 家用多功能1.75L大容量',
        //         price: 211,
        //     },],
        //     xyj = [{
        //         img: 'https://img11.360buyimg.com/n1/jfs/t1/274129/16/6767/153265/67dc061aFb528443f/bcabd6c9f23aa385.jpg.avif',
        //         introduce: ' LG9公斤滚筒洗衣机全自动 475mm超薄机身 AI直驱变频洗衣机家用小户型',
        //         price: 2799,
        //     },
        //     {
        //         img: 'https://img13.360buyimg.com/n1/jfs/t1/257933/16/28142/118235/67c6c32dF715b6e7a/baee6d060c47699c.jpg.avif',
        //         introduce: '志高8/10公斤全自动波轮洗衣机家用智能洗脱一体小型大容量洗烘一体',
        //         price: 318,
        //     },
        //     {
        //         img: 'https://img13.360buyimg.com/n1/jfs/t1/254878/1/29927/181597/67c99d66F71f872a7/399d88ee9e8748ac.jpg.avif',
        //         introduce: 'YANGZI中国扬子集团波轮洗衣机全自动家用小型洗烘一体脱水甩干机大容量',
        //         price: 304,
        //     },
        //     {
        //         img: 'https://img10.360buyimg.com/n1/jfs/t1/284398/26/4782/171428/67da1917Fa4590e99/c179c783ac9b95d1.jpg.avif',
        //         introduce: 'https://img10.360buyimg.com/n1/jfs/t1/284398/26/4782/171428/67da1917Fa4590e99/c179c783ac9b95d1.jpg.avif',
        //         price: 1474,
        //     },
        //     {
        //         img: 'https://img13.360buyimg.com/n1/jfs/t1/277950/37/6202/162037/67dadc19F39ef85dd/07fb4a5ae0a1a26e.jpg.avif',
        //         introduce: '海信林更新同款 璀璨洗烘套装棉花糖12KG滚筒洗衣机全自动+双擎热泵烘干机',
        //         price: 6359,
        //     },
        //     {
        //         img: 'https://img11.360buyimg.com/n1/jfs/t1/263757/2/23371/119186/67ba9c16F479879fc/1e32b0acbec16a3a.jpg.avif',
        //         introduce: 'https://img11.360buyimg.com/n1/jfs/t1/263757/2/23371/119186/67ba9c16F479879fc/1e32b0acbec16a3a.jpg.avif',
        //         price: 318,
        //     },
        //     {
        //         img: 'https://img12.360buyimg.com/n1/jfs/t1/273252/22/5962/161157/67da5069F8525c11f/0246eda696494fde.jpg.avif',
        //         introduce: '统帅（Leader）海尔智家出品 波轮洗衣机全自动10公斤宿舍租房一级能效',
        //         price: 734,
        //     },
        //     {
        //         img: 'https://img14.360buyimg.com/n1/jfs/t1/270929/23/6985/110919/67dbe817F74c62952/9b3ae16c2f63dd66.jpg.avif',
        //         introduce: '海信（Hisense）滚筒洗衣机全自动12公斤超大容量 健康高洗净比智能洗一级能效',
        //         price: 1349,
        //     },],
        //     bx = [{
        //         img: 'https://img13.360buyimg.com/n1/jfs/t1/272374/40/5502/117477/67d96cc2F3695a5fc/af0a0f097a033486.jpg.avif',
        //         introduce: '米家小米【国家补贴20%】501L对开门大容量家用冰箱双开门 ',
        //         price: 1799,
        //     },
        //     {
        //         img: 'https://img10.360buyimg.com/n1/jfs/t1/276009/6/1202/138697/67d00ef0F639f9c55/f9ee0c56b08ce167.jpg.avif',
        //         introduce: '海信500V5真空林更新同款零嵌入式冰箱法式多门超薄',
        //         price: 4844,
        //     },
        //     {
        //         img: 'https://img10.360buyimg.com/n1/jfs/t1/284268/40/4686/99552/67d96cc4Fd3ef592c/b77973e21aa9b9df.jpg.avif',
        //         introduce: '家小米221升 三门小型家用电冰箱 三门三温节能安静运行冷冻冷藏',
        //         price: 998,
        //     },
        //     {
        //         img: 'https://img12.360buyimg.com/n1/jfs/t1/261563/18/30303/156661/67cd1a01Fbb9050e3/3a5e3763c04a8329.jpg.avif',
        //         introduce: '冰箱迷你小型家用商用两用宿舍出租房用双门 58B138升级款',
        //         price: 376,
        //     },
        //     {
        //         img: 'https://img10.360buyimg.com/n1/jfs/t1/279442/33/6024/163319/67dcbb4fF4e649b7f/5d043d06863e97b5.jpg.avif',
        //         introduce: '美的（Midea）605升双开门对开门一级能效净味风冷无霜家用双变频大容量精细分存储冰箱',
        //         price: 2199,
        //     },
        //     {
        //         img: 'https://img12.360buyimg.com/n1/jfs/t1/284045/5/5926/139093/67dbe304F3bb3b7cf/3163a479c08e7eba.jpg.avif',
        //         introduce: '海尔（Haier）618升风冷无霜对开门双开门电冰箱家用',
        //         price: 2479,
        //     },
        //     {
        //         img: 'https://img13.360buyimg.com/n1/jfs/t1/276335/21/6111/139472/67daa3c5F1fb187ad/2e2a4bb7b9cf9be8.jpg.avif',
        //         introduce: '米家小米【国家补贴20%】430L十字四开门家用超薄一级变频除菌净味',
        //         price: 1899,
        //     },
        //     {
        //         img: 'https://img11.360buyimg.com/n1/jfs/t1/266115/29/28745/637677/67c9309bF08834a5b/4a9efc6d4290e893.png.avif',
        //         introduce: '海尔【家电补贴20%】冰箱车载双开门家用小型租房变频风冷一级.   ',
        //         price: 358,
        //     },]
        //     , cf = [{
        //         img: 'https://img11.360buyimg.com/n1/jfs/t1/279270/21/6138/115334/67dbe231F9b75519f/b669a3166f2e7e91.jpg.avif',
        //         introduce: '米家小米侧吸抽油烟机净味净烟机P1 家电补贴20%油烟机',
        //         price: 3099,
        //     },
        //     {
        //         img: 'https://img11.360buyimg.com/n1/jfs/t1/272705/1/7106/195136/67dcc131F4de6d83a/7aea8965d29b68b8.jpg.avif',
        //         introduce: '美的（Midea）破壁机国家补贴 家用多功能1.75L大容量',
        //         price: 211,
        //     },
        //     {
        //         img: 'https://img13.360buyimg.com/n1/jfs/t1/274693/22/5747/168909/67da6fecF6dae0084/64a84f23400dd603.jpg.avif',
        //         introduce: '九阳（Joyoung）电饭煲家用电饭锅5L升大容量4-5-8-10人多功能锅',
        //         price: 143,
        //     },
        //     {
        //         img: 'https://img12.360buyimg.com/n1/jfs/t1/185240/16/3139/179230/60988ba1E3f76031c/b3cf67cb70134c93.jpg.avif',
        //         introduce: '半球（PESKOE） 商用电饭煲大电饭锅食堂商用大电饭煲电饭锅老式大容量',
        //         price: 148,
        //     },
        //     {
        //         img: 'https://img12.360buyimg.com/n1/jfs/t1/280987/24/5002/146904/67d935a7Fa60c9099/251596bb435a76e3.jpg.avif',
        //         introduce: '海尔（Haier）双面洗嵌入式洗碗机云溪W5000Max 大16套容量',
        //         price: 5499,
        //     },
        //     {
        //         img: 'https://img14.360buyimg.com/n1/jfs/t1/261054/33/25440/151062/67c04c34F38e93a47/ca94edaf406d4415.jpg.avif',
        //         introduce: '九阳（Joyoung）绞肉机家用辅食机婴儿 绞馅机',
        //         price: 50,
        //     },
        //     {
        //         img: 'https://img12.360buyimg.com/n1/jfs/t1/235712/32/8643/146415/657fda5eF3ca69f1c/2cb3988a4d15f97c.jpg.avif',
        //         introduce: '扬子多功能电热锅家用电炒锅电火锅电煮锅电蒸锅料理锅',
        //         price: 76,
        //     },
        //     {
        //         img: 'https://img11.360buyimg.com/n1/jfs/t1/254728/30/29659/198475/67c9b213Fa8785ca1/5937838d22ee7dd2.jpg.avif',
        //         introduce: '美的（Midea）电蒸锅 电煮锅电火锅多功能锅家用电锅蒸蛋器蒸包子锅电热锅',
        //         price: 118,
        //     },]

        // ]
        var lan_ = document.querySelectorAll('.lan_')
        var ttt = document.querySelector('.ttt')
        // 默认渲染
        kt.forEach(i => {
            if (i.pid == 0) {
                ttt.innerHTML = `
                    <div>
                        <img src="${i.pid}" alt="">
                        <span>${i.introduce}</span>
                        <span>${i.price}</span>
                    </div>
                        `
            }
        })
        lan_.forEach((item, index) => {
            item.addEventListener('click', () => {
                ttt.innerHTML = ''
                kt.forEach(i => {
                    if (i.pid == index) {
                        ttt.innerHTML = `
                    <div>
                        <img src="${i.pid}" alt="" onclick="${i.id}">
                        <span>${i.introduce}</span>
                        <span>${i.price}</span>
                    </div>
                        `
                    }
                })
            })
        })
        var gou_arr = []
        function apply() {
            gou_arr.forEach(item => {
                ul.innerHTML += `
                <li>
                     <input type="checkbox">
                    <img src='${item.img}'>
                    <span>${item.introduce}</span>
                    <span>${item.price}</span>
                    <button onclick="jian(${item.id})">-</button>
                    <span>${item.num}</span>
                    <button onclick="jia(${item.id})">+</button>
                    </li>
                `
            })
        } apply()
        function add(a) {
            var b = arr.find(item => item.id == a)
            gou_arr.push({
                id: gou_arr.length,
                introduce: b.introduce,
                price: b.price,
                img: a.img,
                num: 1
            })
            apply()
        }

        // 数量加减
        function jia() {
            var a = gou_arr.find(item => item.id == i)
            gou_arr[a].num++
            apply()
        }
        function jian() {
            var a = gou_arr.find(item => item.id == i)
            if (gou_arr[a].num != 0) {
                gou_arr[a].num--
            }
            apply()

        }
    </script>
</body>

</html>